<template>
  <div>
    <div style='width:100%;height:100%' v-bind:id='id'></div>
    <span>{{ testdata2.name }}</span>
  </div>
</template>

<script>
  import Echarts from 'echarts';
  var echart1 = null;
  export default {
    name: 'test',
    data () {
      return {
        d1: Number(1 === true),
        testdata2: { name: 'haha' }
      };
    },
    props: ['id', 'tdata'],
    methods: {
      getOption (d) {
        const option = {
          visualMap: [{
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            color: ['#003e3e','#00ffff','#6affff']
          }, {
            show: false,
            type: 'continuous',
            color: ['#004b97','#2894ff','#acdbff'],
            seriesIndex: 1

          }, {
            show: false,
            type: 'continuous',
            color: ['#0000e3','#9393ff','#ddddff'],
            seriesIndex: 2
            }
          ],

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          title: [{
            left: 'center',
            text: '充电次数'
          }, {
            top: '32%',
            left: 'center',
            text: '充电电量'
          }, {
              top: '65%',
              left: 'center',
              text: '充电费用'
            }
          ],
          // title: [{
          //   text: '在线构建',
          //   subtext: '总计 ' + builderJson.all,
          //   x: '25%',
          //   textAlign: 'center'
          // }, {
          //   text: '各版本下载',
          //   subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
          //     return all + downloadJson[key];
          //   }, 0),
          //   x: '75%',
          //   textAlign: 'center'
          // }, {
          //   text: '主题下载',
          //   subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
          //     return all + themeJson[key];
          //   }, 0),
          //   x: '75%',
          //   y: '50%',
          //   textAlign: 'center'
          // }],
          toolbox: {
            feature: {
              // dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            },
            right: 220
          },
          grid: [{
            top: '5%',
            bottom: '73%'
          }, {
              top: '37%',
              bottom: '40%'
          }, {
              top: '70%',
              bottome: '0'

          }
          ],
          xAxis: [
            {
              type: 'category',
              data: d[0],
              axisPointer: {
                type: 'shadow'
              }
            },{
              type: 'category',
              data: d[4],
              gridIndex: 1,
              axisPointer: {
                type: 'shadow'
              }
            },{
              type: 'category',
              data: d[8],
              gridIndex: 2,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: d[2],
              axisLabel: {
                formatter: '{value}'
              },
              interval: 5
            },{
              type: 'value',
              name: d[6],
              gridIndex: 1,
              axisLabel: {
                formatter: '{value}'
              }
            },{
              type: 'value',
              name: d[10],
              gridIndex: 2,
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: d[3],
              yAxisIndex: 0,
              type: 'line',
              smooth: true,
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: '#73e4ff'
                }
              },
              data: d[1]
            }, {
              name: d[7],
              type: 'line',
              smooth: true,
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: '#4ccfff'
                }
              },
              data: d[5],
              xAxisIndex: 1,
              yAxisIndex: 1
            }, {
              name: d[11],
              type: 'bar',
              smooth: true,
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: '#1784ff'
                }
              },
              data: d[9],
              xAxisIndex: 2,
              yAxisIndex: 2
            }
          ]
        };
        return option;
      }
    },
    mounted () {
      this.testdata2.name = '';
      echart1 = Echarts.init(document.getElementById(this.id));
    },
    beforeUpdate () {
      var option = this.getOption(this.tdata);
      if (option) {
        echart1.setOption(option, true);
      }
    },
    watch: {
      tdata: function (d) {
        var option = this.getOption(d);
        echart1.setOption(option, true);
      }
    },
    computed: {
      comp1 () {
        return `${this.d1}`;
      }
    }
  };
</script>
